<template>
  <div class="container">
    <div class="avatar">
      <img class="header" @click="changeHeader" :src="head_img" alt="" v-if="head_img" />
      <van-uploader
        v-else
        v-model="fileList"
        :after-read="upload"
        max-count="1"
        :max-size="5000 * 1024"
        @oversize="onOversize"
      >
        <van-button icon="plus" type="default"></van-button>
      </van-uploader>
    </div>
    <van-form class="adduser">
      <van-field
        v-model="username"
        name="姓名"
        label="姓名"
        placeholder="请输入学员姓名"
        input-align="right"
        left-icon="http://qnkf.laigl.com/mobilepng/add_name.png"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="gender"
        label="性别"
        :placeholder="$route.query.id ? columns[sex] : '点击选择'"
        @click="showPicker = true"
        input-align="right"
        left-icon="http://qnkf.laigl.com/mobilepng/add_xingbie.png"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="setGender"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="calendar"
        :value="value"
        label="出生日期"
        :placeholder="$route.query.id ? birthday : '点击设置'"
        input-align="right"
        left-icon="http://qnkf.laigl.com/mobilepng/add_birth.png"
        @click="showPicker1 = true"
      />

      <van-popup v-model="showPicker1" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="设置出生日期"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="setBirthday"
          @cancel="showCalendar = false"
        />
      </van-popup>
      <van-field
        v-model="phone"
        name="联系电话"
        label="联系电话"
        placeholder="请输入学员联系电话"
        input-align="right"
        maxlength="11"
        type="tel"
        left-icon="http://qnkf.laigl.com/mobilepng/add_shouji.png"
      />
      <van-field
        v-model="symptom"
        name="主述症状"
        label="主述症状"
        placeholder="(10字以内)"
        input-align="right"
        maxlength="10"
        left-icon="http://qnkf.laigl.com/mobilepng/add_symptom.png"
      />
      <van-field
        name="主要描述"
        label="主要描述"
        autosize
        :border="true"
        readonly
        show-word-limit
        placeholder=""
        input-align="right"
        left-icon="http://qnkf.laigl.com/mobilepng/add_describe.png"
      />
      <textarea
        name=""
        v-model="discribe"
        id=""
        cols="30"
        rows="5"
        placeholder="请输入主要描述"
        maxlength="500"
        style="
          line-height: 1.5rem;
          border: 0.1rem solid #ebedf0;
          outline: none;
          width: 90vw;
          height: 6rem;
          box-sizing: border-box;
          margin-left: 16px;
          font-size: 1.1rem;
        "
      ></textarea>
    </van-form>
    <button class="sub-button" @click="onSubmit" style="margin-bottom: 2rem">
      保存并开始评估
    </button>
  </div>
</template>

<script>
import { Notify, Toast } from "vant";
export default {
  data() {
    return {
      maxDate: new Date(2040, 0, 1),
      minDate: new Date(1949, 0, 1),
      currentDate: new Date(),
      username: "",
      birthday: "",
      phone: "",
      symptom: "",
      discribe: "",
      sex: null,
      gender: "",
      value: "",
      disgender: false, //禁用性别输入框
      showgender: false, //显示隐藏性别选择器
      columns: ["男生", "女生"],
      showPicker: false, //性别选择
      showPicker1: false, //年月日选择
      time: "点击设置",
      // fileList: [{ url: '' }],
      fileList: [],
      avatarUrl: "",
      year: "",
      month: "",
      day: "",
      head_img: "",
    };
  },
  created() {
    var date = new Date();
    this.year = date.getFullYear();
    this.month = date.getMonth();
    this.day = date.getDate();
    if (this.$route.query.edit == 1) {
      this.getInfo();
    }
  },
  methods: {
	  changeHeader(){
          this.head_img = ""
	  },
    getInfo() {
      this.$axios
        .post("solution/info", {
          openid: localStorage.getItem("openid"),
          id: this.$route.query.id,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            const {
              birthday,
              description,
              head_img,
              name,
              niledinut,
              phone,
              sex,
            } = res.data.data;
            this.birthday = birthday;
            this.discribe = description;
            this.head_img = head_img;
            this.username = name;
            this.symptom = niledinut;
            this.phone = phone;
            this.sex = sex;
            // this.fileList.url=this.head_img
          } else {
            Toast(res.data.msg);
          }
        });
    },
    // 上传头像
    upload(file) {
      this.$axios
        .post("user/upimg", {
          image: file.content,
          user_id: this.$route.query.user_id,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            Notify({ type: "success", message: "头像上传成功" });
            this.avatarUrl = res.data.data.img_url;
          } else {
            Notify({ type: "warning", message: "头像上传失败" });
          }
        });
    },
    // 限制上传大小
    onOversize(file) {
      Notify({ type: "warning", message: "图片大小不能超过5Mb" });
    },
    goNext() {
      this.$router.push("./report");
    },
    setGender(value, index) {
      this.gender = value;
      this.showPicker = false;
    },
    // 选择性别
    selectGender(value, index) {
      this.disgender = true;
      this.showgender = true;
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      Toast("取消");
    },
    onSubmit() {
      let openid = localStorage.getItem("openid");
      let id = this.$route.query.id;
      let head_img = this.avatarUrl;
      if (!head_img) {
        head_img = this.gender == "女生" ? "nvtou.png" : "nantou.png";
      }
      if (this.$route.query.edit == 1) {
        this.$axios
          .post("solution/edit", {
            openid,
            id,
            name: this.username,
            sex: this.gender == "女生" ? 1 : this.gender == "男生" ? 0 : "",
            birthday: this.value,
            phone: this.phone,
            niledinut: this.symptom,
            description: this.discribe,
            head_img,
          })
          .then((res) => {
            if (res.data.code == 2000) {
              Toast.success(res.data.msg);
              this.user_list = res.data.data;
              this.$router.push("/solution");
            } else {
              Toast.fail(res.data.msg);
            }
          });
        return;
      }
      this.$axios
        .post("solution/add", {
          openid,
          name: this.username,
          sex: this.gender == "女生" ? 1 : this.gender == "男生" ? 0 : "",
          birthday: this.value,
          phone: this.phone,
          niledinut: this.symptom,
          description: this.discribe,
          img_url: head_img,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            Toast.success(res.data.msg);
            this.user_list = res.data.data;
            this.$router.push("/solution");
          } else {
            Toast.fail(res.data.msg);
          }
        });
    },
    setBirthday(date) {
      if (date.getFullYear() > this.year) {
        Notify({ type: "warning", message: "年份不能比现在更晚了" });
        return;
      }
      if (
        date.getFullYear() == this.year &&
        date.getMonth() + 1 > this.month + 1
      ) {
        Notify({ type: "warning", message: "月份不能比现在更晚了" });
        return;
      }
      if (
        date.getFullYear() == this.year &&
        date.getMonth() + 1 == this.month + 1 &&
        date.getDate() > this.day
      ) {
        Notify({ type: "warning", message: "日期不能比现在更晚了" });
        return;
      }
      this.value = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
      this.showPicker1 = false;
    },
  },
};
</script>

<style scoped lang="less">
.container {
  overflow: hidden;

  .avatar {
    width: 20rem;
    margin-left: 3rem;
    text-align: center;
    height: 8rem;
    .header {
      height: 6rem;
      width: 6rem;
      border-radius: 50%;
	  margin-top: 2rem;
    }
    .van-uploader__preview-image {
      width: 7rem !important;
      height: 7rem !important;
      border-radius: 4rem !important;
      border: 1px solid red !important;
    }
    .van-form {
      .van-cell {
        font-size: 1.5rem !important;
        .van-field__left-icon {
          .van-icon {
          }
        }
      }
    }
    .van-button {
      width: 6rem;
      height: 6rem;
      margin-top: 2rem;
      border-radius: 50%;
      .van-icon {
        color: #ccc;
        font-size: 2rem;
      }
    }
  }
  .sub-button {
    width: 23rem;
    height: 3.8rem;
    box-sizing: border-box;
    background: linear-gradient(to right, #1fcad1, #0383c4);
    border: none;
    outline: none;
    margin-top: 2rem;
    margin-left: 2rem;
    border-radius: 3rem;
    color: #fff;
    font-size: 1.3rem;
  }
}
</style>
